<section class="component">
  <h3 id="button">Button</h3>
  <div>
    <blockquote>
      A <em>command button</em>, also referred to as a push button, is a control
      that causes the application to perform some action when the user clicks it.

      <footer>&mdash; Microsoft Windows User Experience p. 160</footer>
    </blockquote>

    <p>
      A standard button measures 75px wide and 23px tall with 12px of horizontal padding by default.
      They are styled with 2 shades of gray as a vertical gradient.
    </p>

    <%- example(`<button>Click me</button>`) %>

    <p>
      When buttons are clicked, the gray gradient is shifted to corresponding sky blues.
      The following button is simulated to be in the pressed (active) state.
    </p>

    <%- example(`<button[[ class="active" ]]>I am being pressed</button>`) %>

    <p>
      Disabled buttons have solid background and lighter border.
    </p>

    <%- example(`<button disabled>I cannot be clicked</button>`) %>

    <p>
      Button focus is communicated with a dotted border, set 4px within the contents of the button.
      The following example is simulated to be focused.
    </p>

    <%- example(`<button[[ class="focused" ]]>I am focused</button>`) %>

    <p>
      A default button (in Windows, hitting the Enter key in a dialog context triggers the button)
      has a greenish-blue border and a light blue gradient shade.
    </p>

    <%- example(`<button class="default">I am the one!</button>`) %>

    <p>
      The button styles are also applied to the file input element. Due to the complex setup, the
      styles of the standard button's states (hover, active, focus etc.) cannot be applied to the file input button.
    </p>

    <%- example(`<input type="file" />`) %>

    <p>
      You can use the below workaround to apply the complete button styles to a file input element. In this
      setup, the file input is hidden and a label with the <code>role="button"</code> attribute is used
      to trigger the file selection dialog. The <code>tabindex="0"</code> attribute ensures the button is keyboard accessible.
      Some JavaScript is required if you want the label to trigger when it is focused and activated with the keyboard.
    </p>

    <%- example(`
    <label role="button" tabindex="0"><input type="file" /> Choose file</label>
    <label role="button" tabindex="0" class="default"><input type="file" /> Browse...</label>
    `) %>
  </div>
</section>